<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>订单详情</title>

    <!-- Bootstrap -->
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@3.3.7/dist/css/bootstrap.min.css" rel="stylesheet">

    <!-- HTML5 shim 和 Respond.js 是为了让 IE8 支持 HTML5 元素和媒体查询（media queries）功能 -->
    <!-- 警告：通过 file:// 协议（就是直接将 html 页面拖拽到浏览器中）访问页面时 Respond.js 不起作用 -->
    <!--[if lt IE 9]>
    <script src="https://cdn.jsdelivr.net/npm/html5shiv@3.7.3/dist/html5shiv.min.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/respond.js@1.4.2/dest/respond.min.js"></script>
    <![endif]-->
    <link href="//netdna.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet">


    <!--    引入首页样式-->
    <link href="../admin/favicon.ico" rel="shortcut icon"/>
    <link href="../../indexCss.css" rel="stylesheet" type="text/css">

    <style>
        body {

            position: relative;
            color: rgba(0, 0, 0, 0.68)
        }

        a {
            color: rgba(0, 0, 0, 0.68);
            cursor: pointer; /*加手图标*/
            text-decoration: none;
        }

        a:hover {
            color: #24407EAD;
        }

        #topdiv > div {
            margin: 60px 0;

        }

        #div-bot {
            position: relative;
            bottom: 5px;
        }

        #div-bot > p > b {
            color: #F1393A;
            font-size: 35px;
            font-weight: 1000;
        }

        #div-car > div > div {
            float: left;
            overflow: hidden;

        }


    </style>
    <!--    引入首页样式-->
    <link href="../admin/indexCss.css" rel="stylesheet" type="text/css">
</head>
<body>
<header class=" navbar-fixed-top " id="h-new">
    <header-new v-bind:u="u"></header-new>
</header>



<section>

    <div class="container" style="margin-top: 60px;padding: 0">
        <!--            购物车商品列表-->
        <div class="row" style="color: black">
            <table class="table table-hover">
                <tr>
                    <td>
                        <div class="col-md-12" id="div-car" style="height: 40px;">
                            <div class="p-msg col-md-3" >
                                <label>订单编号:</label>
                                <span class="p-name">{{trans.id}}</span>
                            </div>
                            <div class="p-msg col-md-3" >
                                <label>商品数量:</label>
                                <span class="p-name">{{trans.comsum}}</span>
                            </div>
                            <div class="p-msg col-md-3" >
                                <label>订单总价:</label>
                                <span class="p-name" style="font-weight: 600;color:#ee2c2c;">{{trans.price}}</span>
                            </div>
                            <div class="p-msg col-md-3">
                                <label>创建时间:</label>
                                <span class="p-name">{{trans.created}}</span>
                            </div>
                        </div>
                    </td>
                </tr>
                <tr v-for="com in coms">
                    <td style="height:50px">
                        <div class="media-left col-md-1">
                            <img :src="com.url" alt="" class="media-object" style="width:60px">
                        </div>
                        <div class="p-msg col-md-3" style="overflow: hidden">
                            <div class="p-name"> <a :href="'/admin/Mall/ComOne.html?id='+com.comId">{{com.intro}}</a></div>
                            <div class="p-extend p-extend-new"></div>
                        </div>
                        <div class="cell p-props col-md-1" >
                            <label>商品数量</label>
                            <div class="props-txt"><span class="">{{com.sum}}</span></div>
                        </div>
                        <div class="cell p-props col-md-2" >
                            <label>商品单价</label>
                            <div class="props-txt"><span class="">{{com.price}}</span></div>
                        </div>
                        <div class="cell p-props col-md-2" >
                            <label>商品名称</label>
                            <div class="props-txt"><span class="">{{com.name}}</span></div>
                        </div>
                        <div class="cell p-quantity col-md-3">
                            <div class="cell p-sum col-md-4" >
                                <label>商品合计</label>
                                <strong v-text="com.price*com.sum"></strong>
                                <b>元</b>
                            </div>

                        </div>
                    </td>
                </tr>
            </table>
        </div>
    </div>


</section>

<!--正文在这里继续-->

<!--<myfooter></myfooter>-->
</div>
<!-- jQuery (Bootstrap 的所有 JavaScript 插件都依赖 jQuery，所以必须放在前边) -->
<script src="https://cdn.jsdelivr.net/npm/jquery@1.12.4/dist/jquery.min.js"></script>
<script src="https://cdn.bootcss.com/jquery/3.2.1/jquery.min.js"></script>
<!-- 加载 Bootstrap 的所有 JavaScript 插件。你也可以根据需要只加载单个插件。 -->
<script src="https://cdn.jsdelivr.net/npm/bootstrap@3.3.7/dist/js/bootstrap.min.js"></script>
<!--导入弹窗组件-->
<script src=" https://unpkg.com/sweetalert/dist/sweetalert.min.js "></script>
<!--引入vue和axios-->
<script src="https://cdn.bootcdn.net/ajax/libs/axios/0.21.1/axios.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>

<!--引入footer-->
<!--<script src="adminjs/footer.js"></script>-->
<!--引入header-->

<script>

    let section_v1 = new Vue({
        el: "body>section",
        data: {
            userid: 0,
            num: [],
            cls: [], //商品类集合
            coms: [], //购物车集合
            trans:[]  //单个订单详情
        },
        created: function () {
            let id = location.search.split("=")[1]
            axios.get("/trans/One?transid=" + id).then(function (response) {
                section_v1.trans = response.data;
                section_v1.coms = response.data.comTrans
            })
            axios.get("/mall/getUser").then(function (response) {
                section_v1.userid = response.data.userid;
                if (section_v1.userid == 0 && section_v1.userid == null) {
                    swal("您还没登录啊", "请先登录哦!", "error", {
                        button: "现在去",
                    }).then((value) => {
                        if (value == true) {
                            location.href = "/login.html";
                        }
                    })
                }
            })

        },
        methods: {
            removeOne: function (id) {
                if (section_v1.userid != 0 && section_v1.userid != null) {
                    swal({
                        title: "你确认删除吗?",
                        text: "一旦删除，您将无法恢复这个商品哦！",
                        icon: "warning",
                        buttons: true,
                        dangerMode: true,
                    }).then((willDelete) => {
                        if (willDelete) {
                            axios.post("/shop/deleteToShopcar?id=" + id).then(function (response) {
                                if (response.data == "ok") {
                                    swal("噗！您的商品已经被删除了！", {
                                            icon: "success",
                                        },
                                        location.reload()
                                    );
                                }
                            })
                        } else {
                            swal("感谢您手下留情!！");
                        }
                    });
                }
                swal("您还没登录啊", "请先登录哦!", "error", {
                    button: "现在去",
                }).then((value) => {
                    if (value == true) {
                        location.href = "/login.html";
                    }
                })


            },
            del: function (id) {
                if (section_v1.userid !== 0 && section_v1.userid != null) {
                    axios.post("/shop/delToShopcarSum?id=" + id).then(function (response) {
                        if (response.data == 'ok') {

                        }
                    })
                }else {
                    swal("您还没登录啊", "请先登录哦!", "error", {
                        button: "现在去",
                    }).then((value) => {
                        if (value == true) {
                            location.href = "/login.html";
                        }
                    })
                }
            },
            add: function (id) {
                if (section_v1.userid !== 0 && section_v1.userid != null) {
                    axios.post("/shop/addToShopcarSum?id=" + id).then(function (response) {
                        if (response.data == 'ok') {

                        }
                    })
                }else {
                swal("您还没登录啊", "请先登录哦!", "error", {
                    button: "现在去",
                }).then((value) => {
                    if (value == true) {
                        location.href = "/login.html";
                    }
                })
                }
            },
            pays: function () {

                    //判断登录
                    if (section_v1.userid != 0 && section_v1.userid != null) {
                        // 确认多少钱
                        axios.get("/shopping/pays/priceAll?comIds=" + section_v1.comAll).then(function (response1) {

                        swal("结算通知", "结算金额为:"+response1.data+"元,您确定结算吗?", "info").then((value) => {
                            if (value == true) {
                                axios.post("/shopping/pays?comIds=" + section_v1.comAll).then(function (response2) {
                                    //判断结算
                                    if (response2.data == 'ok') {
                                        swal("结算通知", "结算成功!", "success").then((value) => {
                                            location.reload();
                                        })
                                    }else {swal("结算通知", "结算失败,您没钱了吧!", "warning")}

                                })
                            }
                        })
                        })
                    }else {
                        swal("您还没登录啊", "请先登录哦!", "error", {
                            button: "现在去",
                        }).then((value) => {
                            if (value == true) {
                                location.href = "/login.html";
                            }
                        })
                    }


            }
        }
    })



</script>


<!--背景线条-->
<script src="https://cdn.bootcss.com/canvas-nest.js/1.0.1/canvas-nest.min.js" type="text/javascript"></script>
　
<!--右键出字体-->
<script src="../adminjs/bg.js"></script>
　<script src="js/header-new.js"></script>
<script>
    let vn = new Vue({
        el:"#h-new"
        ,data:{
            u:[]
        },
        created:function (){
            axios.get("/mall/getUser").then(function (response) {
                vn.u = response.data;
            })
        }
    })
</script>
<!--引入动态背景js文件-->
<!--<script src="../bgjs2.js"></script>-->
</body>
</html>